import React from 'react';
import { Card, Col, Row} from 'antd';
import WaitToDo from  "./waitToDo/waitToDo.jsx"
import Publish from './publish/Publish'
import "./shouye.css"
import * as echarts from 'echarts'

function Shouye () {
    // 设置图表
            React.useEffect(()=>{
                var myChart = echarts.init(document.getElementById('main'));
                  myChart.setOption( {
                    tooltip: {
                      trigger: 'item'
                    },
                    legend: {
                      top: '5%',
                      left: 'center'
                    },
                    series: [
                      {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                          borderRadius: 10,
                          borderColor: '#fff',
                          borderWidth: 2
                        },
                        label: {
                          show: false,
                          position: 'center'
                        },
                        emphasis: {
                          label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                          }
                        },
                        labelLine: {
                          show: false
                        },
                        data: [
                          { value: 690, name: '昨日销售商品' },
                          { value: 310, name: '其他' },
                        ]
                      }
                    ]
                  })
                  var myChart2 = echarts.init(document.getElementById('main2'));
                  myChart2.setOption( {
                    tooltip: {
                      trigger: 'item'
                    },
                    legend: {
                      top: '5%',
                      left: 'center'
                    },
                    series: [
                      {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                          borderRadius: 10,
                          borderColor: '#fff',
                          borderWidth: 2
                        },
                        label: {
                          show: false,
                          position: 'center'
                        },
                        emphasis: {
                          label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                          }
                        },
                        labelLine: {
                          show: false
                        },
                        data: [
                          { value: 690, name: '昨日销售黄金' },
                          { value: 310, name: '其他' },
                        ]
                      }
                    ]
                  })
            },[])

        return (
            <>
            <div className="site-card-wrapper" style={{margin:'20px 0px'}}>
                <Row gutter={16} style={{height:'30vh'}}>
                <WaitToDo></WaitToDo>
                <Publish></Publish>
                </Row>
            </div>
            <div className="site-card-wrapper" >
                <Row gutter={16} >
                <Col span={24} >
                    <Card title="每日数据" bordered={true} style={{height:'30vh'}}>
                        <div className="flexContainer">
                        <div>
                           <p> <span className="red">XX</span> 件</p>
                            <h2>昨日销售商品</h2>
                        </div>
                        <div>
                           <p> <span className="red">XX</span> 件</p>
                           <h2>昨日销售黄金</h2>
                        </div>
                        <div id="main" style={{width:'300px',height:'22vh'}}>
                            
                            </div>
                            <div id="main2" style={{width:'300px',height:'22vh'}}>
                                
                            </div>
                        </div>
                       
                    </Card>
                </Col>
                </Row>
            </div>
            </>
        );
    }


export default Shouye;